<template>
  <view class="notice-list-page">
    <!-- 活动列表 -->
    <view class="notice-item" v-for="item in noticeList" :key="item.id" @click="goToActivityDetail(item.id)">
      <!-- 活动图片 -->
      <image :src="'http://localhost:1337'+item.coverImage" mode="aspectFill"></image>
      <!-- 活动信息 -->
      <view class="notice-info">
        <text class="notice-title">{{ item.name }}</text>
        <text class="notice-time">{{ item.time }}</text>
        <text class="notice-description">{{ item.desc }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

import {
		getNotice
	} from '../../api/notice.js'
	import {
		onShow
	} from "@dcloudio/uni-app"
	
	import {getClass} from '../../api/activity.js'
	const noticeList=ref([])

	onShow(() => {
		getClassList()

	})
	async function getClassList() {
		let r1 = await getClass();
		console.log(r1.data.data);
	}

// 跳转到活动详情页
const goToActivityDetail = (noticeId) => {
  // 这里可以添加实际的跳转逻辑，如使用 uni.navigateTo 跳转到详情页
  uni.navigateTo({
    url: `/pages/noticeDetail/noticeDetail?id=${noticeId}`
  });
};

</script>

<style scoped>
.notice-list-page {
  padding: 15px;
  background-color: #f5f5f5;
}

.notice-item {
  display: flex;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 15px;
  overflow: hidden;
}

.notice-item image {
  width: 120px;
  height: 120px;
  object-fit: cover;
}

.notice-info {
  flex: 1;
  padding: 10px;
}

.notice-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.notice-time {
  font-size: 12px;
  color: #999;
  margin-bottom: 5px;
}

.notice-description {
  font-size: 14px;
  color: #666;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>